<template>
	<view class="container">
		<!-- <view class="top-bg"></view> -->
		<view class="left-top"></view>
		<view class="right-top"></view>
		<view class="right-bottom"></view>
		<view class="login-box" v-if="!this.bindPhone">
			<view class="tab">
				<!-- <view class="tab-btn" @click="changeType(1)" :class="{'on': loginType == 1}">
					<view class="tab-title">快速登录</view>
					<view :class="[(loginType == 1) ? 'line' : 'none']"></view>
				</view> -->
				<view class="tab-btn" @click="changeType(2)" :class="{'on': loginType == 2}">
					<view class="tab-title">账号登录</view>
					<view :class="[(loginType == 2) ? 'line' : 'none']"></view>
				</view>
			</view>
			
			<view class="fast-login" v-if="loginType == 1">
				<!-- 如果是公众号号，走公众号授权登录 -->
				<view v-if="isWechatMp && !this.bindPhone">
					<button class="login" style="margin-top: 30%;" @click="authLogin">公众号登录</button>
				</view>
				<view v-if="!isWechatMp">
					<view class="input-item">
						<text class="tit">手机号码</text>
						<input 
							type="text" 
							maxlength="11"
							v-model="phone"
							autocomplete="off"
						/>
					</view>
					<view class="input-item">
						<text class="tit">验证码</text>
						<input 
							type="text" 
							placeholder-class="input-empty"
							maxlength="20"
							v-model="password"
							style="width: 75%;"
							autocomplete="off"
						/>
						<view class="text-box" @click="sendMsg">
							<text>{{ text }}</text>
						</view>
					</view>
					<view class="login" @click="goLogin" :loading="logining">登录</view>
				</view>
			</view>
			
			<view class="fast-login" v-if="loginType == 2">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input 
						type="text" 
						maxlength="11"
						v-model="phone"
						placeholder="请输入手机号码"
						autocomplete="off"
					/>
				</view>
				<view class="input-item">
					<text class="tit">密码</text>
					<input 
						type="text" 
						placeholder-class="input-empty"
						maxlength="20"
						password
						v-model="password"
						@input="inputChange"
						placeholder="请输入密码"
						autocomplete="off"
					/>
				</view>
				<view class="login" @click="goLogin()" :loading="logining">登录</view>
			</view>
			
			
		</view>
		
		<view class="user-tips">
			<view style="display: flex;align-items: center;" @click="agreeChange(true)">
				<radio class="round red"  :checked="agree" color="#e93323" style="pointer-events: none;"/>
				已阅读并同意 
			</view>
			
			<text style="color:#FFFFFF; text-decoration: underline;" @click="agreement(1)">《用户协议》</text>和<text style="color:#FFFFFF; text-decoration: underline" @click="agreement(2)">《隐私协议》</text>
		</view>
		
		<view v-if="this.bindPhone" class="bindPhone">
			<view class="title">绑定手机号</view>
			<view class="sub-title">登录或注册需要绑定手机号</view>
			<view class="input-item">
				<text class="tit">手机号码</text>
				<input 
					type="text" 
					maxlength="11"
					v-model="phone"
					autocomplete="off"
				/>
			</view>
			<view class="input-item">
				<text class="tit">验证码</text>
				<input 
					type="text" 
					placeholder-class="input-empty"
					maxlength="20"
					v-model="code"
					style="width: 75%;"
					autocomplete="off"
				/>
				<view class="text-box" @click="sendMsg">
					<text>{{ text }}</text>
				</view>
			</view>
			<view class="login" @click="doBindPhone" :loading="logining">绑定手机号</view>
		</view>
		<!-- <view class="copyright">
			Copyright © 2023 SparkShop开源商城
		</view> -->
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/config/app';
	import {isWeixin} from '@/libs/index.js'
	export default{
		data() {
			return {
				loginCode:"",
				phone: '15695218888',
				password: '123456',
				code: '',
				text: '获取验证码',
				agree: false,
				logining: false,
				loginType: 2,
				timeInterval: null,
				msg_type: 'login_sms_code',
				sendLock: false,
				pages: ['/pages/index/index', '/pages/category/category', '/pages/cart/cart', '/pages/user/user'],
				isWechatMp: false,
				key: '',
				bindPhone: false
			}
		},
		onLoad(options) {
			if (JSON.stringify(options) !== "{}") {
				// 需要补充抽几号
				if (options.type == 1 || options.type == 3) {
					this.key = options.key
					this.bindPhone = true
					this.msg_type = 'bind_sms_code'
					console.log('需要绑定手机号', this.key, this.bindPhone)
				} else if (options.type == 2) {
					this.$tool.error('您已被禁用');
				} else if (options.type == 4) {
					this.key = options.key
					this.getLoginInfo()
				}
			}
		},
		onShow() {
			this.getWxCode()
			if (isWeixin()) {
				this.isWechatMp = true
			}
		},
		methods: {
			getWxCode(){
				uni.login({
				  provider: 'weixin',
				  success: (loginRes) => {
				    if (loginRes.errMsg.includes('login:ok')) {
				      // 登录成功，获取到code
					  this.loginCode = loginRes.code
				      console.log('微信登录成功，获取的code为：', code);
				    } else {
				      console.error('微信登录失败：', loginRes.errMsg);
				    }
				  },
				  fail: (error) => {
				    console.error('登录失败：', error);
				  }
				});
			},

			inputChange(e){
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack(){
				uni.navigateBack();
			},
			// 改变登录方式
			changeType(type) {
				this.loginType = type
				
				if (type == 1) {
					this.msg_type = 'login_sms_code'
					uni.removeStorageSync('send-msg-time')
					this.text = '获取验证码';
					this.sendLock = false
					clearInterval(this.timeInterval)
				}
			},
			// 同意
			agreeChange(val) {
				// this.agree = (val.detail.value.length == 1) ? true : false
				this.agree = val;
			},
			// 短信倒计时
			async sendMsg() {
				if (this.sendLock) {
					return false;
				}
				this.sendLock = true
				
				if (this.phone == '' || !/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.phone)) {
					this.$tool.error('请输入正确的手机号');
					this.sendLock = false
					return false;
				}
				
				let res = await this.$api.common.sendSms.post({
					phone: this.phone,
					type: this.msg_type
				});
				
				if (res.code == 0) {
					uni.setStorageSync('send-msg-time', 60)
					this.countdown()
					this.$tool.success(res.msg);
				} else {
                    this.sendLock = false
					this.$tool.error(res.msg);
				}
			},
			// 倒计时
			countdown() {
				let localTime = uni.getStorageSync('send-msg-time');
				if (parseInt(localTime) == 0) {
					localTime = null;
					return ;
				}
				
				let time = (localTime == null) ? 60 : parseInt(localTime);
				this.timeInterval = setInterval(() => {
					time -= 1;
					uni.setStorageSync('send-msg-time', time)
					if (time == 0) {
						this.text = '获取验证码';
						clearInterval(this.timeInterval)
						this.sendLock = false
					} else {
						this.text = time + ' 秒';
					}
				}, 1000);
			},
			// 协议前往
			agreement(type) {
				uni.navigateTo({
					url: `/pages/public/agreement?type=${type}`
				})
			},
			// 授权登录
			async authLogin() {
				if (!this.agree) {
					this.$tool.error('请同意用户协议');
					return false;
				}
				
				let res = await this.$api.login.loginByAuth.post()
				if (res.code == 0) {
					window.location.href = res.data
				} else {
					this.$tool.error(res.msg);
				}
				
			},
			// 前往登录
			async goLogin() {
				if (!this.agree) {
					this.$tool.error('请同意用户协议');
					return false;
				}
				
				if (this.phone == '' || !/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.phone)) {
					this.$tool.error('请输入正确的手机号');
					return false;
				}
				
				if (this.code == '' && this.loginType == 1) {
					this.$tool.error('请输入验证码');
					return false;
				}
				let res = null;
				if (this.loginType == 1) {
					this.logining = true;
					res = await this.$api.login.loginBySms.post({
						phone: this.phone,
						code: this.code,
						type: this.msg_type,
						spId: uni.getStorageSync('spId')
					});
				} else if (this.loginType == 2) {
					
					if (this.password == "") {
						this.$tool.error('请输入密码');
						return false;
					}
					
					this.logining = true;
					res = await this.$api.login.loginByAccount.post({
						phone: this.phone,
						password: this.password,
						login_code:this.loginCode
					});
				}
				
				
				uni.removeStorageSync('send-msg-time')
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				if (res.code === 0) {
					this.afterLogin(res)
				} else if (res.code === 203) {
					window.location.href = res.data
				} else {
					this.$tool.error(res.msg);
					this.logining = false;
				}
				
				return false;
			},
			// 去绑定手机号
			async doBindPhone() {
				if (this.phone == '' || !/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.phone)) {
					this.$tool.error('请输入正确的手机号');
					return false;
				}
				
				if (this.code == '') {
					this.$tool.error('请输入验证码');
					return false;
				}
				
				let res = await this.$api.login.bindPhone.post({
					phone: this.phone,
					code: this.code,
					type: this.msg_type,
					spId: uni.getStorageSync('spId'),
					key: this.key
				});
			
				this.loading = true
				if (res.code == 0) {
					this.afterLogin(res)
				} else {
					this.$tool.error(res.msg)
				}
			},
			// 登录后动作
			afterLogin(res) {
				
				// let pageUrl = uni.getStorageSync('login_front')
				
				
				// if (pageUrl == 'pages/public/login' || pageUrl == 'pages/public/wechat_login') {
				// 	pageUrl = ''
				// }
				// 设置store
				this.$store
				  .dispatch('login', res)
				  .then(() => {
					  this.loading = false
					  uni.switchTab({
					  	url: '/pages/my/index'
					  })
					// if (!pageUrl) {
					// 	uni.switchTab({
					// 		url: '/pages/my/index'
					// 	})
					// } else {
					// 	if (this.pages.indexOf(pageUrl) != -1) {
					// 		uni.switchTab({
					// 			url: pageUrl
					// 		})
					// 	} else {
					// 		console.log(3);
					// 		uni.redirectTo({
					// 			url: pageUrl
					// 		})
					// 	}
					// }
				  })
				  .catch(() => {
					this.loading = false
				  })
			},
			// 查询登录信息
			async getLoginInfo() {
				let res = await this.$api.login.getLoginInfo.get({key: this.key})
				if (res.code == 0) {
					if (typeof res.data == 'string') {
						res.data = JSON.parse(res.data)
					}
					
					this.afterLogin(res)
				}
			}
		}
	}
</script>

<style lang='scss'>
	.container{
		position:relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-color: rgba(36, 15, 65, 1);
		padding-top: 160rpx;
	}	
	
	.left-top {
		width: 380rpx;
		height: 380rpx;
		background: #8E86F2;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 0.5;
		filter: blur(70px);
		position: absolute;
		top: 36rpx;
		left: -166rpx;
		pointer-events: none;
	}
	
	.right-top {
		width: 402rpx;
		height: 402rpx;
		background: #E31616;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 0.5;
		filter: blur(70px);
		position: absolute;
		right: -201rpx;
		top: 18rpx;
		pointer-events: none;
	}
	
	.right-bottom {
		width: 590rpx;
		height: 590rpx;
		background: #1D46FC;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 0.3;
		filter: blur(70px);
		position: absolute;
		right: -250rpx;
		bottom: -250rpx;
		pointer-events: none;
	}	
	
	.top-bg {
		height: 200rpx;
		background-color: #e93323;
		background-image: url(https://www.guizhouqy.com/login-bg.png);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.login-box {
		box-shadow: 0 2px 14px 0 rgba(0,0,0,.08);
		border-radius: 8px;
		position: relative;
		z-index: 6;
		width: 80%;
		margin: auto;
		
		.tab {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 26px;
			margin: 20px;
			color: #999;
			
			.tab-btn {
				color: #999;
				font-weight: 700;
				
				&.on {
					font-size: 18px;
					color: #FFFFFF;
				}
				
				.none {
					width: 41px;
					background: #fff;
					height: 3px;
				}
				
				.line {
					width: 41px;
					height: 3px;
					background: linear-gradient(313deg, #7116E9 0%, #15D1E2 100%);
					border-radius: 2px;
					margin: 5px auto 0 auto;
					animation: myfirst-data-v-7e561a65 .3s;
					-webkit-animation: myfirst-data-v-7e561a65 .3s;
				}
			}
			
		}
	}
	
	.input-item{
		display:flex;
		flex-direction: column;
		align-items:flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: linear-gradient( 180deg, rgba(154,36,185,0.2) 0%, rgba(133,22,233,0.2) 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #9A24B9;
		height: 120upx;
		margin-bottom: 50upx;
		&:last-child{
			margin-bottom: 0;
		}
		.tit{
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: #FFFFFF;
		}
		input{
			height: 60upx;
			font-size: $font-base + 2upx;
			color: #FFFFFF;
			width: 100%;
		}	
	}
	
	.text-box {
		font-size: 13px;
		position: absolute;
		color: #FF5722;
		right: 50px;
		margin-top: 5px;
	}
	
	.login {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 44px;
		margin-top: 100rpx;
		background: linear-gradient( 313deg, #7116E9 0%, #15D1E2 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		color: #fff;
		font-size: 15px;
	}
	
	.copyright {
		width: 338px;
		position: fixed;
		bottom: 15px;
		left: 50%;
		margin-left: -169px;
		font-size: 10px;
		color: #999;
		text-align: center;
	}
	
	.user-tips {
		display: flex;
		align-items: center;
		color: #FFFFFF;
		width: 100%;
		font-size: 28rpx;
		position: absolute;
		bottom: 30rpx;
		justify-content: center;
		span {
			color: #FFFFFF;
		}
	}
	
	uni-checkbox .uni-checkbox-input {
	    border-radius: 50%;
	    width: 19px;
	    height: 19px;
	}
	
	.tab-title {
		width: 92px;
		text-align: center;
	}
	
	.title {
		font-size: $font-lg;
		font-weight: 700;
	}
	.sub-title {
		font-size: 24upx;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
		color: $font-color-light;
	}
	.bindPhone {
		background: #fff;
		width: 80%;
		padding: 60rpx;
		margin: 0 auto;
		margin-top: -154rpx;
		border-radius: 10rpx;
		.text-box {
			right: 170rpx;
		}
	}
</style>
